<template>
  <e-preview-box class="img-group-upload">
    <div class="img-group-item" v-if="myValue" v-for="(item, index) in myValue" :key="index" :style="style">
      <button type="button">
        <img :src="item" />
      </button>
      <i @click="handleRemove(index)" class="el-icon-close"></i>
    </div>
    <template v-if="!$listeners.add">
      <e-img-upload
        v-if="!myDisabled"
        :multiple="multiple"
        :style="style"
        :size="size"
        :headers="headers"
        :action="action"
        :disabled="myDisabled"
        :validate-event="false"
        :is-crop="isCrop"
        :crop-props="cropProps"
        @change="handleChange"/> 
    </template>
    <template v-else >
      <div v-if="!myDisabled" @click="handle" class="img-group-add" :style="`width:${width}px;height:${height}px;`">
        <button type="button"><i class="el-icon-plus"></i></button>
      </div>
    </template>
  </e-preview-box>
</template>

<script>
  import emitter from 'utils/emitter.js'
  import EImgUpload from './ImgUpload'
  export default {
    componentName: 'EImgGroupUpload',
    components: {
      EImgUpload
    },
    mixins: [emitter],
    props: {
      value: {
        type: Array,
        default () {
          return []
        }
      },
      multiple: {
        type: Boolean,
        default: true
      },
      showFileList: {
        type: Boolean,
        default: false
      },
      validateEvent: {
        type: Boolean,
        default: true
      },
      width: {
        type: Number,
        default: 150
      },
      height: {
        type: Number,
        default: 150
      },
      limit: {
        type: Number,
        default: 0
      },
      size: {
        type: Number
      },
      headers: {
        type: Object
      },
      action: {
        required: false,
        default: '/api/upload/image'
      },
      isCrop: {
        type: Boolean,
        default: false
      },
      cropProps: {
        type: Object
      }
    },
    computed: {
      style () {
        return {
          width: this.width + 'px',
          height: this.height + 'px'
        }
      }
    },
    watch: {
      value (value) {
        this.myDisabled = !!this.limit && (this.value.length >= this.limit || this.myValue.length >= this.limit)
        this.myValue = value
      }
    },
    data () {
      return {
        myDisabled: !!this.limit && this.value.length >= this.limit,
        myValue: this.value
      }
    },
    methods: {
      handleChange (data) {
        if (this.myValue && !this.myDisabled) {
          this.myValue.push(data.url)
          this.change()
        }
      },
      handleRemove (index) {
        this.myValue.splice(index, 1)
        this.change()
      },
      change () {
        this.$emit('change', this.myValue).$emit('input', this.myValue)
        if (this.validateEvent) { // 触发表单校验
          this.dispatch('ElFormItem', 'el.form.change', this.myValue)
          this.dispatch('ElFormItem', 'el.form.blur', this.myValue)
        }
      },
      handle () {
        this.$emit('add')
      }
    }
  }
</script>
